﻿@model DragonSolution.Web.Data.Entity.ProductInfo
@using DragonSolution.Web.Common.Common;
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>编辑产品</title>
    <link rel="stylesheet" href="~/Areas/AdminMrg/kindeditor-4.1.10/themes/default/default.css" />
    <link rel="stylesheet" href="~/Areas/AdminMrg/kindeditor-4.1.10/plugins/code/prettify.css" />
    <script charset="utf-8" src="~/Areas/AdminMrg/kindeditor-4.1.10/kindeditor.js"></script>
    <script charset="utf-8" src="~/Areas/AdminMrg/kindeditor-4.1.10/lang/zh_CN.js"></script>
    <script charset="utf-8" src="~/Areas/AdminMrg/kindeditor-4.1.10/plugins/code/prettify.js"></script>
    <script>
	    KindEditor.ready(function (K) {
	        var editor1 = K.create('#ProductContent', {
	            cssPath: '/Areas/AdminMrg/kindeditor-4.1.10/plugins/code/prettify.css',
	            uploadJson: '/Areas/AdminMrg/kindeditor-4.1.10/asp.net/upload_json.ashx',
	            fileManagerJson: '/Areas/AdminMrg/kindeditor-4.1.10/asp.net/file_manager_json.ashx',
	            allowFileManager: true,
	            afterBlur: function () { this.sync(); },
	            afterCreate: function () {
	                var self = this;
	                K.ctrl(document, 13, function () {
	                    self.sync();
	                    K('form[name=example]')[0].submit();
	                });
	                K.ctrl(self.edit.doc, 13, function () {
	                    self.sync();
	                    K('form[name=example]')[0].submit();
	                });
	            }
	        });
	        prettyPrint();
	    });
    </script>
    <style type="text/css">
        #comInfo {
            width: 1000px;
            float: left;
            margin-left: 8px;
            display: inline;
        }

            #comInfo ul li {
                min-height:26px;
                line-height: 26px;
                float: left;
                margin-top: 5px;
                background-color: #fff;
            }

                #comInfo ul li.t1 {
                    width: 100px;
                }

                #comInfo ul li.t2 {
                    width: 900px;
                }

                #comInfo ul li.t3 {
                    width: 1000px;
                    background-color: #f0f0ee;
                    border: 1px solid #cccccc;
                    margin-top: 20px;
                    text-align: center;
                }

                #comInfo ul li.t4 {
                    width: 900px;
                    height: 600px;
                }

                #comInfo ul li.t5 {
                    width: 900px;
                    height: 38px;
                }

        .textBox {
            border: 1px solid #cccccc;
            background-color: white;
            width: 600px;
            height: 25px;
            float: left;
        }

        .tips {
            /*width: 490px;*/
            height: 25px;
            float: left;
            color: red;
            font-size: 13px;
        }

        .mBtn {
            width: 119px;
            height: 34px;
            background: url(/Areas/AdminMrg/Content/adminImg/M_submit.gif) no-repeat;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
        }

        .mBtn1 {
            width: 100px;
            height: 26px;
            background: url(/Areas/AdminMrg/Content/adminImg/M_btn.gif) no-repeat;
            color: #0076c9;
            font-size: 14px;
            cursor: pointer;
        }
        .fileListBox { float:left;width:100%;}
        #file-list li{width: 75px;float: left;line-height: 70px;list-style: none;position: relative;margin-right:10px}
        .del {position: absolute;z-index: 99;left: 55px;height: 16px;width: 16px;top: -2px;background-image: url("/CommonResource/Images/Icon/delete.png");}
    </style>
</head>
<body>
    <div class="Mtop"></div>
    <div class="Mcont">
        <div class="Mleft">@Html.Partial("PartialAdminLeft")</div>
        <div class="Mright">
            <div class="top">
                <div class="btn">
                    <a href="/Account/logOff"><div class="link"></div></a>
                    <a target="_blank" href="@ConstDim.IndexPath"><div class="link"></div></a>
                </div>
                <div class="site">您的位置 / 产品中心 / 编辑产品</div>
            </div>
            <div class="mid">
                <div id="comInfo">
                    @using (Html.BeginForm("EditProduct", "MProduct", new { area = "AdminMrg" }, FormMethod.Post, new { enctype = "multipart/form-data" }))
                    {
                        <ul>
                            @Html.HiddenFor(m => m.ProductID)
                            <li class="t1"><p>产品名称：</p></li>
                            <li class="t2">@Html.TextBoxFor(m => m.ProductName, "", new { @class = "textBox" })</li>
                            <li class="t1"><p>推介首页：</p></li>
                            <li class="t2">@Html.CheckBoxFor(m => m.IsTopValue)</li>
                            <li class="t1"><p>发布时间：</p></li>
                            <li class="t2"> @Html.TextBoxFor(m => m.ProductPostTime, null, new { @class = "textBox laydate-icon", @readonly = "readonly", @style = "width:140px" })</li>
                            <li class="t1"><p>产品类别：</p></li>
                            <li class="t2">
                                @Html.HiddenFor(m => m.ProductCategory)
                                <input type="text" id="tName" class="textBox" readonly="readonly" disabled="disabled" style="width:160px" />
                                <input type="button" value="选择类别" class="table_btn" style="margin-left:10px" onclick="SelectType()" />
                            </li>
                            <li class="t1"><p>产品图片：</p></li>
                            <li class="t2">
                                @Html.Hidden("FileIDList")
                                <input type="file" name="myFile" id="myFile" multiple="multiple" style="float:left" />&nbsp;&nbsp;
                                <div class="tips">支持&nbsp;<span id="fileExtendName"></span>&nbsp;格式，单个最大<span id="fileMaxMB"></span>M，最多上传<span id="fileMaxCount"></span>个，上传后在下面可以看到缩略图</div>
                                <br />
                                <div class="fileListBox">
                                    <ul id="file-list">
                                   </ul>
                                </div>
                            </li>
                            <li class="t3"><p>内容：</p></li>
                            <li class="t4">@Html.TextBoxFor(m => m.ProductContent, "", new { @class = "textBox", style = "width:1000px;height:600px" })</li>
                            <li class="t5"><input type="submit" value="发布" class="mBtn" onclick="return check()" /></li>
                        </ul>
                    }
                </div>
            </div>
        </div>
    </div>
    <div id="tdMsg" style="display:none">@ViewBag.msg</div>
    <!--日期-->
    <script src="~/CommonResource/laydate/laydate-min.js"></script>
    <link href="~/CommonResource/laydate/skins/danlan/laydate.css" rel="stylesheet" />
    <script src="~/CommonResource/Js/Common.js"></script>
    <!--弹出层-->
    <script src="~/CommonResource/artDialog/jquery.artDialog.source.js?skin=blue"></script>
    <script src="~/CommonResource/artDialog/plugins/iframeTools.source.js"></script>
    <!--上传-->
    <script src="~/CommonResource/Js/ajaxfileupload.js"></script>
    <script type="text/javascript">
        var $ID = "#ProductPostTime";
        var postTime = {
            elem: $ID,
            format: 'YYYY-MM-DD hh:mm:ss',
            istime: true,
            istoday: true,
            choose: function (datas) {}
        };
        $(function () {
            //提示语
            if ($('#tdMsg').html().trim() != "") {
                alert($('#tdMsg').html());
            }
            //展开当前二级菜单
            var $this = $("#Mul li[liName='product'] > a");
            $this.next("ul").slideToggle();
            changeIcon($this);
            //时间
            laydate(postTime);
            //类型名称
            var typeName = '@ViewBag.typeName';
            if (typeName != "") {
                $("#tName").val(typeName);
            }
            //读取图片
            GetImgList();

            //传图片
            UploadFile();
        });

        function SelectType() {
            var id = Number($("#ProductCategory").val());
            var titleStr = "选择分类";
            var url = "/AdminMrg/MProduct/SelectType/" + id;
            var option = {};
            option.title = titleStr;
            option.lock = true;
            option.opacity = 0.25;
            option.backgroundColor = "#777";
            option.width = "350px";
            option.height = "450px";
            option.close = function () {
                //读取iframe页面回传的值
                var typeId = art.dialog.data('ReturnParentId');
                var typeName = art.dialog.data('ReturnParentName');
                $("#ProductCategory").val(typeId);
                $("#tName").val(typeName);
            }
            art.dialog.open(url, option);
        }

        function GetImgList() {
            var proId = $("#ProductID").val();
            var params = {};
            params.action = "GetImgList";
            params.proId = proId;
            $.ajax({
                url: "/Areas/AdminMrg/Ashx/MProduct.ashx",
                data: params,
                type: "POST",
                dataType: "json",
                success: function (msg) {
                    if (msg.OperateResult == "操作成功") {
                        for (var i = 0; i < msg.ResponseData.length; i++) {
                            var obj = msg.ResponseData[i];
                            $("#file-list").append("<li><img fileId='" + obj.FileId + "' class='am-radius' width='60px' height='60px' src='" + obj.FileUrl + "' /><div class='del'></div></li>");
                        }
                        $('.del').on("click", function () {
                            $(this).parent().remove();
                        });
                    }
                },
                error: function (e) {
                    alert("加载出错");
                }
            });
        }

        //传图片
        function UploadFile() {
            var fileMaxMB = @ConstDim.ProductMaxMB;
            $("#fileMaxMB").html(fileMaxMB);
            var fileExtendName = '@ConstDim.ProductExtendName';
            $("#fileExtendName").html(fileExtendName);
            var fileMaxCount = @ConstDim.ProductMaxCount;
            $("#fileMaxCount").html(fileMaxCount);
            var fileElementId = "myFile";
            var url = "/Ashx/UploadFiles.ashx";
            $('#myFile').on('change', function () {
                var htmlLiCount = $("#file-list li").length;
                var requestCount = this.files.length;
                //验证数量
                if ((requestCount + htmlLiCount) > fileMaxCount) {
                    alert("上传个数不能超过" + fileMaxCount + "个！");
                    return false;
                }
                else {
                    //显示处理动画gif
                    for (var i = 0; i < requestCount; i++) {
                        $("#file-list").append("<li><img class='am-radius' width='48px' height='48px' src='/CommonResource/Images/bigloading.gif' /></li>");
                    }
                    //异步
                    var params = {};
                    params.action = "FileUpload";
                    params.fileMaxMB = fileMaxMB;
                    params.fileExtendName = fileExtendName;
                    params.uploadPath = "/Resource/Images/ProductImg";
                    params.isCompress = "0";
                    $.ajaxFileUpload({
                        url: url,
                        data: params,
                        type: "POST",
                        fileElementId: fileElementId,
                        dataType: "text/html",
                        success: function (data, status) {
                            var dataObj = JSON.parse(data);
                            var msg = "";
                            if (dataObj.OperateResult == "调用成功") {
                                var liCount = $("#file-list li").length;
                                for (var i = 0; i < dataObj.ResponseData.length; i++) {
                                    var obj = dataObj.ResponseData[i];
                                    if (obj.UploadResult.toString() == "true") {
                                        $("#file-list li").eq(liCount - i - 1).html("<img fileId='" + obj.FileId + "' class='am-radius' width='60px' height='60px' src='" + obj.FileUrl + "' /><div class='del'></div>");
                                    } else {
                                        $("#file-list li").eq(liCount - i - 1).remove();
                                        msg += "【" + obj.FileName + "】" + obj.ErrorInfo + "\n\r";
                                    }
                                }
                                $('.del').on("click", function () {
                                    $(this).parent().remove();
                                });
                                if (msg != "") {
                                    alert(msg);
                                }  
                                //将当前当前页面上传的图片id集合赋值到隐藏域
                                SetFileIds();
                            }
                        },
                        error: function (data, status, e) {
                            alert("上传错误！");
                        }
                    });
                }
            });
        }

        //将当前当前页面上传的图片id集合赋值到隐藏域
        function SetFileIds() {
            var ids = "";
            var liCounts = $("#file-list li img").length;
            if (liCounts > 0) {
                $("#file-list li img").each(function () {
                    ids += $(this).attr("fileId") + ",";
                });
            }
            //id赋值到隐藏域
            $("#FileIDList").val(ids);
        }

        function check() {            
            //判断
            if ($("#ProductName").val() == "") {
                alert("请输入产品名称");
                return false;
            }
            if ($("#tName").val() == "") {
                alert("请选择类别!");
                return false;
            }
            if ($("#FileIDList").val() == "") {
                alert("请上传图片!");
                return false;
            }
            //将当前当前页面上传的图片id集合赋值到隐藏域
            SetFileIds();
        }
    </script>
</body>
</html>
